<template>
  <section :class="[!isSetPageBackground ? 'c-bg-white' : '']" class="c-flex-column">
    <cust-title-com :headLine="item.styleParam && item.styleParam.headLine ? item.styleParam.headLine : null" :marginSettings="item.styleParam && item.styleParam.marginSettings ? item.styleParam.marginSettings : null" v-if="item.isShowTitle" :titleName="item.title || showTitleDefaultName" :titleDesc="item.desc" :showMore="item.isShowMore" :showMoreType="item.showMoreType" @clickMore="clickMore"></cust-title-com>
    <div :class="!isSetPageBackground ? 'c-ph4 c-pv12' : 'c-pv24 c-ph24'"
      :style="item.styleParam && item.styleParam.marginSettings ? getVerticalSpacing(item.styleParam.marginSettings) + getHorizontalSpacing(item.styleParam.marginSettings) : ''">
      <div class="c-bg-white c-br16 c-text-hidden c-ph20">
        <div class="c-flex-row c-aligni-center c-justify-sb c-pv30" :class="ind != item.items.prods.length - 1 ? 'c-bd-b1' : ''" v-for="(it, ind) in item.items.prods" :key="ind" @click="clickGoDetail(it.caId)">
          <div class="c-lh44 c-fc-xblack c-fs28 c-text-ellipsis2 c-w0 c-flex-grow1">{{it.title}}</div>
          <div class="c-lh36 c-fs24 c-fc-gray c-ml30" v-if="it.isShowTime">{{getMonthDay(it.issuedAt)}}</div>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
import custTitleCom from "@/components/templates/custIndexTemp/custTitleCom.vue";
import { customStyle } from '@/utils/customStyle.js'
import { appRouterChange } from "@/mixin/appRouterPush.js";
export default {
  components: {
    custTitleCom,
  },
  mixins: [appRouterChange, customStyle],
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      },
    },
    pageName: {//首页 INDEX 预览页 PREVIEW_INDEX 微页面 MICRO_PAGE
      type: String,
      default: "INDEX"
    },
  },
  data() {
    return {
      isSetPageBackground: sessionStorage.getItem("isSetPageBackground") || 0
    };
  },
  computed: {
    getMonthDay() {
      return function (date) {
        let now = new Date();
        let time = new Date(date.replace(/-/g, "/"));
        return `${time.getFullYear() != now.getFullYear() ? time.getFullYear() + "/" : ""}${time.getMonth() < 9 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1}/${time.getDate() < 10 ? '0' + time.getDate() : time.getDate()}`
      }
    },
  },
  methods: {
    clickMore() {
      if (this.pageName == 'PREVIEW_INDEX') {
        return;
      }
      let toPath = '/homePage/article/articleList';
      this.iosAppRouteChange(toPath);
    },
    clickGoDetail(caId) {
      if (this.pageName == 'PREVIEW_INDEX') {
        return;
      }
      this.$routerGo(this, "push", { path: '/homePage/article/articleDetail?caId=' + caId});
    }
  },
};
</script>
<style scoped>
</style>